<template>
  <div class="nav-bar">
    <h4>{{ realTitle }}</h4>
    <button class="right-button" @click="updateTitle">修改标题</button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "默认标题",
    },
  },
  data() {
    return {
      // 将props的值转存到data中
      realTitle: this.title,
    };
  },
  methods: {
    updateTitle() {
      // 不能直接修改props的值
      //this.title = "我是标题";
      // 修改转存到data中的数据
      this.realTitle = "我是标题";
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 50px;
  background-color: blue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .right-button {
    position: absolute;
    right: 5px;
  }
}
</style>
